<template>
  <el-card class="Game">
    <el-row>
      <el-col :span="6">
        <img src="../../assets/imgs/MySQL.png" alt="SQL之母" class="logo" />
        <span class="title">SQL Studying</span>
      </el-col>
      <el-col :span="18">
        <el-menu
          :default-active="activeGameIndex"
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#409eff"
        >
          <el-menu-item index="1">
            <el-icon><Cpu /></el-icon>
            学习
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><Trophy /></el-icon>
            关卡
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><Guide /></el-icon>
            广场
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <router-view />
  </el-card>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentInternalInstance, onMounted } from 'vue';
import { Cpu, Trophy, Guide } from '@element-plus/icons-vue'

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;

// 活跃的index
const activeGameIndex = ref(proxy.$storage.getItem('activeGameIndex') || '');

onMounted(() => {
  selectType();
})

// 选择MySQL游戏菜单
function handleSelect(path: any) {
  proxy.$storage.setItem('activeGameIndex', path);
  activeGameIndex.value = path;
  selectType();
};
// 选择菜单类型
function selectType() {
  if (activeGameIndex.value === '1') {
    const level = proxy.$storage.getItem('activeLevel') || '';
    if (level) {
      proxy.$router.push(`/game/study/${level}`);
    } else {
      proxy.$router.push('/game/study/level1');
    }
  } else if (activeGameIndex.value === '2') {
    proxy.$router.push('/game/levels');
  } else if (activeGameIndex.value === '3') {
    proxy.$router.push('/game/ground');
  } else {
    activeGameIndex.value = '1';
    proxy.$storage.setItem('activeGameIndex', '1');
    proxy.$router.push('/game/study');
  }
};
</script>

<style lang="less" scoped>
.Game {
  margin-bottom: 20px;

  .el-row {
    height: 30px;
    margin-bottom: 20px;
  }

  .logo {
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 15px;
  }

  .title {
    float: left;
    font-family: '华文隶书';
    margin-left: 5px;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
    color: #000;
  }

  .el-menu.el-menu--horizontal {
    border: none;
    display: flex;

    .el-menu-item {
      font-size: 18px;
      height: 30px;
      line-height: 30px;
      padding: 0;
      margin: 0 30px;
      background-color: unset;

      .el-icon {
        margin: 0 0px -3px 0;
      }
    }

    .el-menu-item:hover {
      color: #409eff;

      i {
        color: #409eff;
      }
    }
  }
}
</style>
